import React,{useState}from 'react'
import "./index.css"
export default function Item({ todo, done }) {
    //isActive状态 保存li的active类是否添加  和按钮的display状态
    //鼠标移入li事件函数
    const [isActive, setIsActive] = useState(false);
    const mouseEnterHandle = (e) => {
        setIsActive(true)
    }
    const mouseLeaveHandle = (e) => {
        setIsActive(false)
    }
    return (
        <li
            onMouseEnter={mouseEnterHandle}
            onMouseLeave={mouseLeaveHandle}
            className={isActive ? "active" : ""}
        >
            <label>
                <input type="checkbox" checkd={done} />
                <span>{todo}</span>
            </label>
            <button className="btn btn-danger" style={{ display: isActive ? "block" : "none" }}>删除</button>
        </li>
    )
}
